<script setup>
import { ref } from 'vue'
import { NMenu, NButton, NTable, NSelect, NInput } from 'naive-ui'
import Editor from './components/Editor.vue'
import { initOpt, getStorage, yaml2pac } from './utils'
import { EXT_OPT } from './constants'

let pacScript = ''
const pacSave = async () => {
  if (!pacScript) {
    const data = await getStorage('yaml')
    pacScript = await yaml2pac(data.yaml)
  }
  console.log('save pacScript', pacScript)
  chrome.storage.sync.set({ pacScript })
}

const handleValue = (val) => {
  console.log('pacScript =', val)
  pacScript = val
}

const options = [
  { label: 'DIRECT', value: 'direct' },
  { label: 'HTTP', value: 'http' },
  { label: 'HTTPS', value: 'https' },
  { label: 'SOCKS5', value: 'socks5' }
]

const save = () => {
  for (let op of menuOptions.value) {
    if (op.show) {
      chrome.storage.sync.get(EXT_OPT, ({ opt_ext }) => {
        const opt = Object.assign({}, opt_ext, {
          [op.key]: op
        })
        chrome.storage.sync.set({ [EXT_OPT]: opt })
      })
    }
  }
}

const menuOptions = ref(initOpt())
chrome.storage.sync.get(EXT_OPT, ({ opt_ext }) => {
  for (let op in opt_ext) {
    menuOptions.value.splice(menuOptions.value.length - 1, 0, opt_ext[op])
  }
})

const mode = ref('')
chrome.storage.sync.get(['mode'], (data) => {
  if (data.mode) {
    mode.value = data.mode
    for (let op of menuOptions.value) {
      op.show = (op.key === data.mode)
    }
  }
})

const handleUpdate = (val) => {
  mode.value = val
  for (let i of menuOptions.value) {
    i.show = (i.key === val)
  }
  chrome.storage.sync.set({ mode: val })
}

const handleClick = (evt) => {
  if (evt.target.innerText === 'new mode') {
    menuOptions.value.splice(menuOptions.value.length - 1, 0, {
      type: 'fixed_servers',
      label: 'proxy',
      key: 'proxy' + Date.now(),
      value: {
        scheme: '',
        host: '',
        port: '',
      },
    })
    handleUpdate('proxy')
  }
}
</script>

<template>
<div class="layout">
  <div class="side">
    <n-menu
      :options="menuOptions"
      style="width: 150px;"
      :indent="15"
      :value="mode"
      :on-update:value="handleUpdate"
      @click="handleClick"
    />
  </div>
  <div class="main">
    <template v-for="it in menuOptions" :key="it">
      <div v-if="it.type === 'pac_script'" v-show="it.show">
        <div><n-input type="text" v-model:value="it.label" /></div>
        <Editor v-on:value="handleValue"></Editor>
        <n-button @click="pacSave">save</n-button>
      </div>
      <div v-if="it.type === 'fixed_servers'" v-show="it.show">
        <div><n-input type="text" v-model:value="it.label" /></div>
        <n-table size="small" striped>
          <thead>
            <tr>
              <th>网址协议</th>
              <th>代理协议</th>
              <th>代理服务器</th>
              <th>代理端口</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>(默认)</td>
              <td><n-select v-model:value="it.value.scheme" size="medium" :options="options" clearable /></td>
              <td><n-input type="text" v-model:value="it.value.host" /></td>
              <td><n-input type="text" v-model:value="it.value.port" /></td>
              <td></td>
            </tr>
            <tr>
              <td>http://</td>
              <td><n-select v-model:value="value" size="medium" :options="options" clearable /></td>
              <td><n-input type="text" /></td>
              <td><n-input type="text" /></td>
              <td></td>
            </tr>
            <tr>
              <td>https://</td>
              <td><n-select v-model:value="value" size="medium" :options="options" clearable /></td>
              <td><n-input type="text" /></td>
              <td><n-input type="text" /></td>
              <td></td>
            </tr>
          </tbody>
        </n-table>
        <n-button @click="save">save</n-button>
      </div>
    </template>
  </div>
</div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin: 10px;
  font: 400 14px/1.4em 'Segoe UI','Open Sans',Calibri,Candara,Arial,sans-serif;
}
.layout {
  display: flex;
}
.side {
  width: 180px;
}
.main {
  flex: 1;
}
.n-button {
  margin-top: 10px;
}
</style>
